<template>
  <div>
    <!--基本使用-->
    <h2>1.基本使用</h2>
    <CommentSystem
        :shortcuts="{
      'Ctrl+Enter': 'submit',
      'Escape': 'clear'
    }"
        @shortcut-triggered="handleShortcut"
    />
    <h2>2.数组格式快捷键</h2>
    <!--  数组格式快捷键：-->
    <CommentSystem
        :shortcuts="[
    { shortcut: 'Ctrl+S', action: 'saveDraft' },
    { shortcut: 'Alt+C', action: 'clear' }
  ]"
        prevent-default
        @shortcut-triggered="handleAction"
    />
    <h2>3.动态控制激活状态</h2>
    <!--  动态控制激活状态-->
    <CommentSystem
        :active="isActive"
        @activated="log('激活')"
        @deactivated="log('停用')"
    />
    <button @click="isActive = !isActive">切换激活状态</button>
    <h2>4.自定义作用域</h2>
    <!--  自定义作用域-->
    <div id="custom-area">
      <CommentSystem
          target="#custom-area"
          :shortcuts="{ 'Ctrl+B': 'bold' }"
      />
    </div>
    <h2>5.完整功能示例</h2>
    <!--  完整功能示例-->
    <CommentSystem
        :shortcuts="shortcutConfig"
        :disabled="isDisabled"
        :active="true"
        target="#comment-area"
        prevent-default
        stop-propagation
        @shortcut-triggered="handleShortcut2"
        @disabled-changed="handleDisableChange"
    />


  </div>
</template>

<script setup>
import {ref} from 'vue'
import CommentSystem from '@/components/CommentSystem/CommentSystem.vue'

const handleShortcut = (shortcut, action) => {
  console.log(`快捷键 ${shortcut} 触发操作：${action}`)
}

// 动态控制激活状态
const isActive = ref(true)
const log = (msg) => console.log(msg)

// 完整功能示例
const isDisabled = ref(false)
const shortcutConfig = ref({
  'Ctrl+Enter': 'submit',
  'Alt+Shift+C': 'clear'
})

const handleShortcut2 = (shortcut, action) => {
  alert(`触发快捷键：${shortcut}，执行操作：${action}`)
}

const handleDisableChange = (disabled) => {
  console.log('禁用状态变化：', disabled)
}
</script>